<template>
    <!-- 考生答卷预览 -->
    <div class="exam-paper-view-wrap">
        <el-row class="examinee-info-wrap">
            <el-col :span="20">
                <el-row class="examinee-info-item">
                    <el-col :span="2">考&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生：</el-col>
                    <el-col :span="20">{{ examBaseInfo.examAccountName }}（手机号：{{ examBaseInfo.phone }}）</el-col>
                </el-row>
                <el-row class="examinee-info-item">
                    <el-col :span="2">答卷时间：</el-col>
                    <el-col :span="20">{{ examBaseInfo.beginTime }}</el-col>
                </el-row>
                <el-row class="examinee-info-item">
                    <el-col :span="2">耗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时：</el-col>
                    <el-col :span="20">{{ oldInfo.costTime }}</el-col>
                </el-row>
                <el-row class="examinee-info-item">
                    <el-col :span="2">结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果：</el-col>
                    <el-col :span="20" :class="{'color-1': !isPass, 'color-3': isPass}">{{ examResult(examBaseInfo.score, examBaseInfo.passLine) }}</el-col>
                </el-row>
            </el-col>
            <el-col :span="4">
                <p><span class="score-result" :class="{'color-1': !isPass, 'color-3': isPass}">{{ oldInfo.score }}</span>分</p>
            </el-col>
        </el-row>
        <h3 class="text-center">{{ examBaseInfo.name }}</h3>
        <div class="question-view-wrap" v-loading="loading">
            <div class="question-view-item" v-for="(info, i) in questionDetailList" :key="i">
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="24" class="question-view-item-head">
                        <p class="type-title">{{ (i+1) + '、'}}<el-tag >{{ mapQuestionType(info.questionType) }}</el-tag></p>

                        <span v-if="info.result == 2" class="color-3"><i class="el-icon-check"></i>正确</span>
                        <span v-else-if="info.result == 1" class="color-1"><i class="el-icon-close"></i>错误</span>
                        <span v-else class="color-2">未作答</span>

                        <span>分数：{{ info.questionScore }}分</span>
                        <span>得分：{{ info.result == 2 ? info.questionScore : 0 }}分</span>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <!-- <el-col :span="3">
                        <p class="type-title text-right">【题干】</p>
                    </el-col> -->
                    <el-col :span="21" :offset="1">
                        <div>
                            <p class="question-content">{{ info.content }}</p>
                            <!-- 题干图片 -->
                            <div v-if="info.contentPics" class="question-pic">
                                <img v-for="(item,i) in info.contentPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.contentPics" :data-imgpreviewindex="i"/>
                            </div>
                            <!-- 题干视频 -->
                            <div v-if="info.video" class="question-video">
                                <video :src="info.video" controls="controls" height="200" width="300"></video>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <!-- <el-col :span="3">
                        <p class="type-title text-right">【选项】</p>
                    </el-col> -->
                    <el-col :span="21" :offset="1">
                        <el-row class="question-option-list" v-for="(item, index) in info.optionList" :key="index">
                            <el-col :span="1">
                                <el-checkbox v-if="info.questionType==3" v-model="item.selectAnswer" :label="1" :true-label="1" :false-label="0" disabled>{{''}}</el-checkbox>
                                <el-radio v-else v-model="item.selectAnswer" :label="1" disabled>{{''}}</el-radio>
                            </el-col>
                            <el-col :span="23" :class="{'color-1': (info.result != 2 && item.selectAnswer==1), 'color-3': (info.result == 2 && item.selectAnswer==1)}">
                                <p v-if="info.questionType==1">{{ item.optionContent }}</p>
                                <p v-else>{{ item.optionMark + '、' + item.optionContent }}</p>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="3">
                        <p class="type-title text-right">考生答案：</p>
                    </el-col>
                    <el-col :span="21">
                        <!-- 判断 -->
                        <template v-if="info.questionType == 1">
                            <p v-for="(item, index) in info.optionList" :key="index">
                                <span v-if="info.answer == item.optionMark">{{ item.optionContent }}</span>
                            </p>
                        </template>
                        <template v-else>
                            <p>{{ dealWithSymbol(info.answer) }}</p>
                        </template>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="3">
                        <p class="type-title text-right">正确答案：</p>
                    </el-col>
                    <el-col :span="21">
                        <p>{{ info.currentAnswer }}</p>
                    </el-col>
                </el-row>
                <el-row type="flex" :gutter="20" class="type-item-wrap">
                    <el-col :span="3">
                        <p class="type-title text-right">解&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;析：</p>
                    </el-col>
                    <el-col :span="21">
                        <div v-if="info.analysisContent || info.analysisPics">
                            <p class="analysis-content">{{ info.analysisContent }}</p>
                            <!-- 解析图片 -->
                            <div v-if="info.analysisPics" class="analysis-pic">
                                <img v-for="(item,i) in info.analysisPics.split(',')"  :key="i" :src="item||defaultImg" width="100" height="100" @click="$imgPreview" :data-imgpreview="info.analysisPics" :data-imgpreviewindex="i"/>
                            </div>
                        </div>
                        <p v-else>无</p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { getExamDetailById, getExamQuestionByExamId } from '@/api/exam'
export default {
    name: 'ExamineeAnswerSheetView',
    props: {
        closeFun: {
            type: Function,
            required: true
        },
        oldInfo: {
            type: Object,
            default () {
                return {}
            }
        }
    },
    data() {
        return {
            loading: true,
            isPass: false, // 是否通过
            examBaseInfo: {}, // 试卷名称
            questionDetailList: []
        }
    },
    created() {
        if(this.oldInfo && this.oldInfo.id) {
            // 获取考试信息
            getExamDetailById({
                examDetailId: this.oldInfo.id
            }).then(res => {
                if(res.status === 200) {
                    this.examBaseInfo = res.data
                }
            })
            // 获取答卷信息
            getExamQuestionByExamId({
                examDetailId: this.oldInfo.id
            }).then(res => {
                if(res.status === 200) {
                    // 处理学生选择答案
                    this.dealWithOptionList(res.data)
                }
            })
        }
    },
    methods: {
        mapQuestionType(key) {
            let MapList = {
                1: '判断题',
                2: '单选题',
                3: '多选题'
            }

            return MapList[key]
        },
        examResult(score, passLine) {
            if(score > passLine) {
                this.isPass = true
                return '及格'
            } else {
                return '不及格'
            }
        },
        dealWithOptionList(list) {
            let arr = list
            arr.forEach(item => {
                let answer = []
                item.optionList.forEach(optionItem => {
                    if(item.answer.indexOf(optionItem.optionMark) > -1) {
                        // 如果考生答案中选择了该选项
                        optionItem.selectAnswer = 1
                    } else {
                        // 未选择该选项
                        optionItem.selectAnswer = 0
                    }
                    // 计算正确答案
                    if(optionItem.isAnswer == 1) {
                        if(item.questionType == 1) {
                            answer.push(optionItem.optionContent)
                        } else {
                            answer.push(optionItem.optionMark)
                        }
                    }
                })

                // 添加正确答案属性
                item.currentAnswer = answer.join('、')
            })
            this.questionDetailList = arr
            this.$nextTick(() => {
                this.loading = false
            })
        },
        dealWithSymbol(str) {
            let arr = str.split(',')

            return arr.join('、')
        }
    },
}
</script>
<style lang="scss" scoped>
.exam-paper-view-wrap {
    .examinee-info-wrap {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #DCDFE6; 
        .examinee-info-item {
            line-height: 40px;
        }
        .score-result {
            font-size: 68px;
        }
    }
    h3 {
        margin-top: 20px;
        font-size: 26px;
    }
    .question-view-item {
        margin-bottom: 10px;
        line-height: 40px;
        border-bottom: 1px dashed #DCDFE6;
        .question-view-item-head {
            display: flex;
            span {
                margin-right: 30px;
            }
        }
        .question-pic {
            display: flex;
            img {
                margin-right: 20px;
            }
        }
    }
}
</style>